<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工系统</title>
</head>
<body>

<div id="table">
    <div class="add">
        <input type="text" placeholder="姓名" v-model="input.name" />
        <input type="text" placeholder="性别" v-model="input.sex" />
        <input type="date" placeholder="出生日期" v-model="input.create" />
        <input type="date" placeholder="入职时间" v-model="input.birthday" />
        <input type="text" placeholder="学历" v-model="input.xl" />
        <input type="text" placeholder="职务" v-model="input.job" />
        <input type="text" placeholder="住址" v-model="input.address" />
        <input type="text" placeholder="电话" v-model="input.phone" />
        <input type="text" placeholder="紧急联系人" v-model="input.jphone" />
        <input type="text" placeholder="所属部门" v-model="input.dname" />
        <button :disabled="!input.name||!input.sex||!input.create||!input.birthday||!input.xl||!input.job||!input.address||!input.phone||!input.jphone||！input.dname" @click="addItem()">新增</button>
    </div>
    <table cellpadding="0" cellspacing="0">
        <thead>
        <tr>
            <th><input type="checkbox" v-model="checkALL" @change="selectAllItem(v)" />序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>出生日期</th>
            <th>入职时间</th>
            <th>学历</th>
            <th>职务</th>
            <th>住址</th>
            <th>电话</th>
            <th>紧急联系人</th>
            <th>所属部门/th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(v,i) in items" :key="v.id">
            <td><input type="checkbox" v-model="v.check" @change="selectItem(v)" />{{v.id}}</td>
            <td>{{v.name}}</td>
            <td>{{v.sex}}</td>
            <td>{{v.create}}</td>
            <td>{{v.birthday}}</td>
            <td>{{v.xl}}</td>
            <td>{{v.job}}</td>
            <td>{{v.address}}</td>
            <td>{{v.phone}}</td>
            <td>{{v.jpgone}}</td>
            <td>{{v.dname}}</td>
            <td>
                <button :disabled="!v.check" @click="delItem(i)">删除</button>
                <button @click = "updataShow(v)">编辑</button>
            </td>
        </tr>
        </tbody>
    </table>


    <div id="layer" v-show="flag">
        <div class="mask">
            <div class="title">
                编辑
                <span @click="flag = false">x</span>
            </div>
            <div class="content" >
                <input type="text" placeholder="姓名" v-model="edit.name"/>
                <input type="text" placeholder="性别" v-model="edit.sex"/>
                <input type="date" placeholder="出生日期" v-model="edit.create"/>
                <input type="date" placeholder="入职时间" v-model="edit.birthday"/>
                <input type="text" placeholder="学历" v-model="edit.xl"/>
                <input type="text" placeholder="职务" v-model="edit.job"/>
                <input type="text" placeholder="住址" v-model="edit.address"/>
                <input type="text" placeholder="电话" v-model="edit.phone"/>
                <input type="text" placeholder="紧急联系人" v-model="edit.jphone"/>
                <input type="text" placeholder="所属部门" v-model="edit.dname"/>
                <button @click="updataItem()" :disabled="!edit.name||!edit.sex||!edit.create||!edit.birthday||!edit.xl||!edit.job||!edit.address||!edit.phone||!edit.jphone||!edit.dname">更新</button>
                <button @click="flag = false">取消</button>
            </div>
        </div>
    </div>
</div>

</body>
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/jquery.min.js"></script>


<script>
    new Vue({
        el: '#table',
        data: {
            input: {
                name: '',
                sex: '',
                create: '',
                birthday:'',
                xl:"",
                job:"",
                address:"",
                phone:"",
                jphone:"",
                dname:"",
                check: false,
            },
            flag: false,//弹框显示与隐藏
            checkALL: false,//多选,
            //编辑的数据
            edit: {
                name: '',
                sex: '',
                create: '',
                birthday:'',
                xl:"",
                job:"",
                address:"",
                phone:"",
                jphone:"",
                dname:"",
                check: false,
            },

        },
        methods: {
            //添加数据
            addItem() {
                //每次添加的时候item最大的id+1  遍历出所有id
                var _id = Math.max(...this.items.map(v => v.id)) + 1;
                var { name, sex, create, birthday, xl, job, address, phone, jphone, dname} = this.input;
                this.items.push({
                    name,
                    sex,
                    create,
                    birthday,
                    xl,
                    job,
                    address,
                    phone,
                    jphone,
                    dname
                });
            },
            //删除
            delItem(i) {
                //splice
                // this.splice(i, 1);
                //filter
                this.items = this.items.filter((v, index) => index != i);
            },
            //编辑弹层显示及回显
            updataShow(v) {
                this.flag = true;
                //数据回显
                this.edit={
                    name:v.name,
                    sex:v.sex,
                    create:v.create,
                    birthday:v.birthday,
                    xl:v.xl,
                    job:v.job,
                    address:v.address,
                    phone:v.phone,
                    jphone:v.jphone,
                    dname:v.dname
                }
            }
        },
        computer:{
            searchData(){
                //search为空时  retun items全部数据
                if(!search) return this.items;
                //模糊查询
                return this.items.filter(v=>{
                    return v.name.includes(searchName);
                })
            }
        },
    })
</script>
</html>
